<!--
* @description 音频播放
* @author zywu
* @date 2021/01/06 15:08:47
!-->
<template>
	<img :src="imgSrc" id="voiceBtn" @click="play" />
</template>

<script>
export default {
	props: {
		src: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			isPlay: false,
			isResume: false,
		}
	},

	components: {},

	computed: {
		imgSrc() {
			return this.isPlay && !this.isResume
				? require('../assets/img/report/voice.gif')
				: require('../assets/img/report/voice.png')
		},
	},

	created() {},

	mounted() {},

	methods: {
		start() {
			this.audioIlink = new Audio()
			this.audioIlink.src = this.src
			this.audioIlink.play()
			this.isPlay = true
			this.audioIlink.addEventListener(
				'ended',
				() => {
					this.isresume = true
					this.audioIlink.pause()
				},
				false
			)
		},
		play() {
			if (!this.src) {
				try {
					top.window.app.methods.showToastCenter('未找到语音文件')
				} catch (error) {}
				return
			}
			if (!this.isPlay) {
				this.start()
			}
			//已经播放-暂停
			else if (!this.isResume) {
				this.isResume = true
				this.audioIlink.pause()
			}
			//暂停中-继续播放
			else {
				this.isResume = false
				this.audioIlink.play()
			}
		},
	},
}
</script>